<template>
  <div class="content store-list">
    <div class="search-content">
      <span class="fs16">经销商名称</span>
      <el-input v-model="searchContent.storeName" placeholder="请输入内容" class="input w200"></el-input>
      <el-select v-model="searchContent.distributor_level" placeholder="请选择">
        <el-option
          v-for="item in agentLevel"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select v-model="searchContent.sms_state" placeholder="请选择">
        <el-option
          v-for="item in stateName"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-button type="primary" @click="search">搜索</el-button>
      <el-button type="primary" @click="reset">重置</el-button>
    </div>
    <div class="search-list" style="width:100%;">
      <el-table
        :data="aList"
        border
        class="table-box"
        style="width: 100%"
        :height="oHeight"
        :header-cell-style="{'text-align':'center'}"
        header-cell-class-name="hdCellStyle" 
        :cell-style="{'text-align':'center'}"
      >
        <el-table-column fixed prop="store_id" label="店铺ID" key="store_id" width="80"></el-table-column>
        <el-table-column
          prop="store_name"
          label="经销商名称"
          key="store_name"
          min-width="200"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="store_owner"
          label="公司名称"
          key="store_owner"
          min-width="200"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="member_id"
          label="账号id"
          key="member_id"
          width="150"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="member_name"
          label="账号名称"
          key="member_name"
          width="150"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column key="power" label="权限" width="100">
          <template slot-scope="scope">
            <span class="green" v-show="scope.row.id">开通</span>
            <span class="red" v-show="!scope.row.id">无</span>
          </template>
        </el-table-column>
        <el-table-column prop="distributor_level" key="distributor_level" label="等级" width="100">
          <template slot-scope="scope">
            <span v-show="scope.row.distributor_level=='0'">未知</span>
            <span v-show="scope.row.distributor_level=='1'">普通</span>
            <span v-show="scope.row.distributor_level=='2'">白银</span>
            <span v-show="scope.row.distributor_level=='3'">黄金</span>
            <span v-show="scope.row.distributor_level=='4'">钻石</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="sms_money"
          label="短信余额"
          key="sms_money"
          width="110"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="sms_price"
          label="短信单价"
          key="sms_price"
          width="110"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column prop="state" label="状态" key="state" width="100"></el-table-column>
        <el-table-column
          prop="yj_mobile"
          label="短信预警手机"
          width="120"
          key="yj_mobile"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column fixed="right" align="center" label="操作" key="operate" width="200">
          <template slot-scope="scope">
            <el-button
              class="operateBtn"
              type="text"
              v-show="scope.row.id"
              @click="dialogShow('edit',scope.row.store_id)"
            >修改</el-button>
            <el-button
              class="operateBtn"
              type="text"
              v-show="scope.row.id"
              @click="dialogShow('recharge',scope.row.store_id)"
            > | 充值</el-button>
            <el-button
              class="operateBtn"
              type="text"
              v-show="scope.row.id"
              @click="dialogShow('give',scope.row.store_id)"
            > | 赠送</el-button>
            <el-button
              class="operateBtn"
              type="text"
              v-show="scope.row.id"
              @click="dialogShow('deductSms',scope.row.store_id)">
             | 减扣
            </el-button>
            <el-button
              class="operateBtn"
              type="text"
              v-show="scope.row.id"
              @click="handleDetails(scope.row.store_id)">
             | 记录
            </el-button>
            <!-- <el-button
              class="operateBtn"
              type="text"
              v-show="scope.row.id"
              @click="jumpSetting(scope.row.store_id,scope.row.store_name)"
            >|权限</el-button>
            <el-button
              class="operateBtn"
              type="text"
              v-show="!scope.row.id"
              @click="openPermission(scope.row.member_id,scope.row.store_id)"
            >开通权限</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-button size="mini" type="primary" @click="exportFile">导出</el-button>
        <pagination
        :arr="aList"
        :total="total"
        :currentPage="currentPage"
        :handleSizeChange="handleSizeChange"
        :handleCurrentChange="handleCurrentChange"
      ></pagination>
      </div>
    </div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="400px"
      :before-close="handleClose"
    >
      <p class="dialog-li" v-show="editAgent">
        <span class="fs16 fl">经销商ID</span>
        <el-input
          v-model="dialogId"
          placeholder="请输入内容"
          class="input"
          type="number"
          :disabled="true"
        ></el-input>
      </p>
      <p class="dialog-li">
        <span class="fs16 fl">经销商名称</span>
        <el-input
          v-model="dialogName"
          placeholder="请输入内容"
          class="input"
          type="text"
          :disabled="true"
        ></el-input>
      </p>
      <p class="dialog-li " v-show="editAgent">
        <span class="fs16 fl">经销商等级</span>
        <el-select @change="agentLevelChange(dialogAgent)" v-model="dialogAgent" placeholder="请选择" class="input">
          <el-option
            v-for="item in agentLevel"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </p>
       <p class="dialog-li" v-show="!deduction">
        <span style="weith:70px;margin-right: 23px;line-height:3px;" class="fs16 f1">短信单价</span>
        <el-input
          v-model="sms_price"
          class="input"
          type="text"
        ></el-input>
      </p>
      <p class="dialog-li" v-show="smsOperate">
        <span class="fs16 fl">短信余额</span>
        <el-input
          v-model="sms_money"
          placeholder="请输入内容"
          class="input"
          type="number"
          :disabled="true"
        ></el-input>
      </p>
      <p class="dialog-li" v-show="smsOperate">
        <span class="fs16 fl">{{smsOperateTitle}}</span>
        <el-input v-model="smsOperateMoney" placeholder="请输入金额" class="input" type="number"></el-input>
      </p>     
      <p class="dialog-li last" v-show="deduction">
        <span class="fs16 fl">备注</span>
        <el-input v-model="remark" placeholder="备注" class="input" type="text"></el-input>
      </p>      
      <span slot="footer" class="dialog-footer" >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm('edit')" v-show="editAgent">确 定</el-button>
        <el-button type="primary" @click="confirm('recharge',2)" v-show="smsOperateRecharge">确 定</el-button>
        <el-button type="primary" @click="confirm('give',1)" v-show="smsOperateGive">确 定</el-button>
        <el-button type="primary" @click="confirm('deduction',1)" v-show="deduction && !smsOperateGive && !smsOperateRecharge">确 定</el-button>
      </span>
    </el-dialog>
    <Records :visible="visible" :store_id="store_id" @updateVisible="updateVisible"/>
    <sms-verification :options="smsDialogOptions" @update="smsDialogUpdate"></sms-verification>
  </div>
</template>
<script>
import pagination from "@/components/pagination/pagination.vue";
import { resize } from "@/common/js/height.js";
import Records from "./records.vue";
import SmsVerification from "@/components/home/sms-verification.vue";
export default {
  name: "store-list",
  components: {
    pagination,
    Records,
    SmsVerification
  },
  data() {
    return {
      input: "",
      agentLevel: [
        {
          value: "0",
          label: "经销商等级"
        },
        {
          value: "4",
          label: "钻石"
        },
        {
          value: "3",
          label: "黄金"
        },
        {
          value: "2",
          label: "白银"
        },
        {
          value: "1",
          label: "普通"
        }
      ],
      stateName: [
        {
          value: "",
          label: "状态"
        },
        {
          value: "1",
          label: "正常"
        },
        {
          value: "2",
          label: "预警"
        },
        {
          value: "3",
          label: "欠费"
        }
      ],
      aList: [],
      oHeight: 800,
      total: 1,
      lastPage: 1,
      currentPage: 1,
      searchContent: {
        //该变量一直在变，用来定义默认搜索内容
        storeName: "",
        distributor_level: "",
        sms_state: ""
      },
      searchObj: {
        //该变量定义查询传参
        pagesize: localStorage.getItem("eachNum")
          ? parseInt(localStorage.getItem("eachNum"))
          : 10
      },
      dialogVisible: false, //经销商弹窗
      dialogTitle: "弹窗",
      editAgent: false, //编辑经销商
      smsOperate: false, //充值和赠送
      smsOperateRecharge: false, //充值
      smsOperateGive: false, //赠送
      dialogId: "",
      dialogName: "经销商名称",
      dialogAgent: "",
      sms_price:"",
      smsOperateTitle: "",
      sms_money: "",
      smsOperateMoney: "",
      deduction:false,
      remark:'',
      visible: false,
      store_id: 0,
      smsDialogOptions: { visible: false }
    };
  },
    methods: {
    exportFile() {
        var host;
        if (this.$store.state.isServer) {
            host = location.host.replace("admin", "api");
        } else {
            host = location.host + "/api";
        }
        var url = location.protocol + "//" + host + "/admin/store/index.php?act=storePermission&is_export=1";
            url = url + `&store_name=${this.searchContent.storeName}&distributor_level=${this.searchContent.distributor_level}&sms_state=${this.searchContent.sms_state}`;
            window.location.href = url;
    },
    agentLevelChange(value){
      var that = this;
      this.$http
        .post("/admin/store/index.php?act=storePermission&op=getSmsPrice")
        .then(
          res => {
            if (res.code == 1) {
               this.sms_price = res.data.find(item=>{
                return item.value==value
              }).label
            
            
            } else {
              alert(res.msg);
              
            }
          },
          err => {
            this.$message.error("获取数据失败！");
          }
        );
    },
    getList() {
      var that = this;
      this.searchObj.curpage = that.currentPage;
      this.$http
        .get("/admin/store/index.php?act=storePermission", {params:this.searchObj})
        .then(
          res => {
            if (res.code == 1) {
              this.aList = res.data;
              this.total = parseInt(res.show_page.TotalNum);
            } else {
              alert(res.msg);
              this.aList = [];
            }
          },
          err => {
            this.$message.error("获取数据失败！");
          }
        );
    },
    search() {
      //1、获取搜索的内容
      this.searchObj.store_name = this.searchContent.storeName;
      this.searchObj.distributor_level = this.searchContent.distributor_level;
      this.searchObj.sms_state = this.searchContent.sms_state;
      this.currentPage = 1;
      //2、获取内容列表
      this.getList();
    },
    reset() {
      //1、清空搜索的内容
      this.searchContent.storeName = "";
      this.searchContent.distributor_level = "";
      this.searchContent.sms_state = "";
      this.searchObj.store_name = "";
      this.searchObj.distributor_level = "";
      this.searchObj.sms_state = "";
      this.currentPage = 1;
      //2、获取内容列表
      this.getList();
    },
    //每页数据
    handleCurrentChange: function(val) {
      this.currentPage = val;
      /*请求数据*/
      this.getList();
    },
    //分组一页多少数据
    handleSizeChange(val) {
      this.currentPage = 1;
      this.searchObj.page = 1;
      localStorage.setItem("eachNum", val);
      this.searchObj.pagesize = this.eachNum = val;
      /*请求数据*/
      this.getList();
    },
    //开通店铺权限
    openPermission(member_id, store_id) {
      this.$http
        .post("/admin/store/index.php?act=storePermission&op=openPermission", {
          member_id: member_id,
          store_id: store_id
        })
        .then(
          res => {
            if (res.code == 1) {
              this.$message({
                message: "开通成功",
                type: "success"
              });
              this.getList();
            } else {
              this.$message({
                message: res.msg,
                type: "warning"
              });
              this.$message({
                message: res.msg,
                type: "warning"
              });
            }
          },
          err => {
            this.$message.error("获取数据失败！");
          }
        );
    },
    //跳转店铺权限
    jumpSetting(store_id, store_name) {
      this.$router.push({
        path: "/home/control-panel/power-setting",
        query: {
          id: store_id,
          name: store_name
        }
      });
    },
    //浮层显示
    dialogShow(type, store_id) {
      if (type == "edit") {
        this.editAgent = true;
        this.smsOperate = false;
        this.dialogTitle = "修改经销商";
        this.deduction = false;
      } else {
        //短信余额修改
        this.editAgent = false;
        this.smsOperate = true;
        this.smsOperateMoney = ""; //清空短信金额输入框
        this.remark = ""; //清空备注
        if (type == "recharge") {
          this.dialogTitle = "充值";
          this.smsOperateTitle = "充值金额";
          this.smsOperateRecharge = true; //充值
          this.smsOperateGive = false; //赠送
          this.deduction = true;
        } else if (type == "give") {
          this.dialogTitle = "赠送";
          this.smsOperateTitle = "赠送金额";
          this.smsOperateRecharge = false; //充值
          this.smsOperateGive = true; //赠送
          this.deduction = true;
        }else if(type == "deductSms"){
          this.dialogTitle = "扣减";
          this.smsOperateTitle = "扣减金额";
          this.smsOperateRecharge = false; //充值
          this.smsOperateGive = false; //赠送
          this.deduction = true;
        }
      }
      this.$http
        .post("/admin/store/index.php?act=storePermission&op=storeInfo", {
          store_id: store_id
        })
        .then(
          res => {
            if (res.code == 1) {
              this.dialogVisible = true;
              this.dialogId = res.data.store_id;
              this.dialogName = res.data.store_name;
              this.dialogAgent = res.data.distributor_level;
              this.sms_money = res.data.sms_money;
               this.sms_price = res.data.sms_price;
            } else {
              this.$message({
                message: res.msg,
                type: "warning"
              });
            }
          },
          err => {
            this.$message.error("获取数据失败！");
          }
        );
    },
    smsDialogUpdate(res) {
      const { type, typeClass, verified } = res
      this.confirm(type, typeClass, verified )
    },
    confirm(type, typeClass, verified = false) {
      if (type == "edit") {
        //点击编辑店铺确认按钮
        if (this.dialogAgent == "") {
          this.$message({
            message: "请选择店铺等级",
            type: "warning"
          });
        } else {
          this.$http
            .post("/admin/store/index.php?act=storePermission&op=updateLevel", {
              store_id: this.dialogId,
              distributor_level: this.dialogAgent,
              sms_price:this.sms_price
            
            })
            .then(
              res => {
                if (res.state == 1) {
                  this.$message({
                    message: "编辑成功",
                    type: "success"
                  });
                  this.dialogVisible = false;
                  this.getList();
                } else {
                  this.$message({
                    message: res.msg,
                    type: "warning"
                  });
                }
              },
              err => {
                this.$message.error("获取数据失败！");
              }
            );
        }
      }else if(type=='deduction'){
        if (this.smsOperateMoney <= 0) {
          this.$message({
            message: "请输入正确的金额",
            type: "warning"
          });
        } else {
          this.$http
            .post("/admin/store/index.php?act=smsRecharge&op=deductSms", {
              store_id: this.dialogId,
              recharge_amount: this.smsOperateMoney,
              sms_money: this.sms_money,
              remark:this.remark,
            })
            .then(
              res => {
                if (res.code == 1) {
                  this.$message({
                    message: "扣减成功",
                    type: "success"
                  });
                  this.dialogVisible = false;
                  this.getList();
                } else {
                  this.$message({
                    message: res.msg,
                    type: "warning"
                  });
                }
              },
              err => {
                this.$message.error("获取数据失败！");
              }
            );
        }         
      }else {
        if (this.smsOperateMoney <= 0) {
          this.$message({
            message: "请输入正确的金额",
            type: "warning"
          });
        } else {
          if (type === 'recharge') {
            if (!verified) {
              this.smsDialogOptions = { 
                visible: true, 
                params: { type, typeClass, verified: true },
                type: 2
              }
              return
            }
          }
          this.$http
            .post("/admin/store/index.php?act=smsRecharge&op=addSms", {
              type: typeClass,
              store_id: this.dialogId,
              recharge_amount: this.smsOperateMoney,
              sms_money: this.sms_money,
              remark:this.remark
            })
            .then(
              res => {
                if (res.code == 1) {
                  if (typeClass == 1) {
                    this.$message({
                      message: "赠送成功",
                      type: "success"
                    });
                  } else {
                    this.$message({
                      message: "充值成功",
                      type: "success"
                    });
                  }
                  this.$message({
                    message: "充值成功",
                    type: "success"
                  });
                  this.dialogVisible = false;
                  this.getList();
                } else {
                  this.$message({
                    message: res.msg,
                    type: "warning"
                  });
                }
              },
              err => {
                this.$message.error("获取数据失败！");
              }
            );
        }
      }
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    handleDetails(store_id) {
      this.visible = true
      this.store_id = parseInt(store_id)
    },
    updateVisible() {
      this.visible = false
      this.store_id = 0
    }
  },
  mounted() {
    //页面刷新就执行
    this.getList();
    resize(this);
  }
};
</script>
<style scoped>
.green {
  color: #0b0;
}
.red {
  color: #c00;
}
.addAgent {
  position: absolute;
  right: 10px;
  top: 60px;
}
.handle {
  color: #4395ff;
}
.dialog-li {
  margin: 0 0 30px 0;
}
.dialog-li.last {
  margin: 0;
}
.dialog-li .fl {
  width: 70px;
  margin-right: 10px;
  line-height: 3;
}
.dialog-li .input {
  width: 280px;
}
.operateBtn {
  margin-left: 0;
}
.paginationOne {
    margin-top: -40px;
}
.pagination .el-button {
    margin-top: 16px;
    margin-left: 20px;
}
</style>
